import { Button } from "antd"
import { SvgIcon } from "../icon"
import { useFlattenedRoutes, usePermissionRoutes, useRouter } from "@/router/hooks"
import { AppRouteObject } from "@/types/router";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useMatches } from "react-router-dom";
import { menuFilter } from '@/router/utils';
import { ItemType } from "antd/es/menu/interface";

type Props = {
  title?: string,
  size?: number,
  onClick?: () => void,
}


export default function RouteMenu({title, size, onClick}: Props) {
  const { t } = useTranslation();
  const matches = useMatches();
  const [breadCrumbs, setBreadCrumbs] = useState<ItemType[]>([]);

  const flattenedRoutes = useFlattenedRoutes();
  const permissionRoutes = usePermissionRoutes();

  const menuUrls = [
    'datasets/list',
    'datasets/api',
    'apps/report/:id',
  ]

  useEffect(() => {
    const menuRoutes = menuFilter(permissionRoutes);
    const paths = matches.filter((item) => item.pathname !== '/').map((item) => item.pathname);

    const pathRouteMetas = flattenedRoutes.filter((item) => paths.indexOf(item.key) !== -1);

    let items: AppRouteObject[] | undefined = [...menuRoutes];
    console.log(items, pathRouteMetas);
    
  }, [matches, flattenedRoutes, t, permissionRoutes]);

  return (
    <div className='flex justify-left items-center'>
      {/* <Button type='text' onClick={handleClick}>
        <SvgIcon icon='ic-back' size={size ?? 24} />
      </Button>
      <span style={titleStyle}>{title}</span> */}
      menu
    </div>
  )
}